import React, { useState } from "react";
import style from "./Home.module.css";
import { Tabs, message } from 'antd';
import { Card } from 'antd';
import { TeamOutlined } from '@ant-design/icons';
import { LockOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";

import { Flex, QRCode } from 'antd';
const value = 'https://ant.design';

export default function Home() {

    //路由
    const navigate = useNavigate();


    const onFinish = values => {
        console.log('Success:', values);
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };






    const onChange = key => {
        console.log(key);
    };
    //手机号
    const shoujihao = "17731491768";
    const [phone, setPhone] = useState("");
    //密码
    const mima = "123456";
    const [password, setPassword] = useState("");
    //登录
    const handeldeng = () => {
        if (phone == shoujihao && password == mima) {
            navigate('/login');
            message.success("登录成功");
        } else {
            if (phone !== shoujihao) {
                message.error("手机号错误");
            }
            else if (phone === mima) {
                if (password !== mima) {
                    message.error("密码错误");
                }else{
                    navigate('/login');
            message.success("登录成功");
                }

            }else{
                navigate('/login');
            message.success("登录成功");
            }


        }
    }

    return (
        <>
            <div className={style.home}
                style={{ backgroundImage: "url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)" }}
            >
                {/* <div className={style.title}> */}

                <Card variant="borderless" style={{ backgroundColor: "rgba(255,255,255,0.8)", width: 400, height: 400, top: 200, left: 650, position: "relavtive" }}>
                    <Tabs>

                        <Tabs.TabPane key="1" tab="账号登录" >

                            <Form
                                name="basic"
                                labelCol={{ span: 8 }}
                                wrapperCol={{ span: 16 }}
                                style={{ maxWidth: 600 }}
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                autoComplete="off"
                            >

                                {/* 图片 */}
                                <TeamOutlined style={{ position: "relative", top: 35, left: 25 }} />
                                <Form.Item style={{ position: "relative", top: 10, left: 50 }}
                                    name="phone"
                                    // 添加规则，确保输入为数字且长度为 11
                                    rules={[
                                        { pattern: /^\d{11}$/, message: '请输入 11 位数字的手机号' },
                                    ]}
                                >
                                    {/* 限制输入只能为数字 */}
                                    <Input
                                        placeholder="手机号"
                                        type="number"
                                        maxLength={11}
                                        value={phone}
                                        onChange={(e) => setPhone(e.target.value)}
                                    />
                                </Form.Item>
                                <LockOutlined style={{ position: "relative", top: 10, left: 25 }} />
                                <Form.Item style={{ position: "relative", top: -15, left: 50 }}

                                    name="password"

                                >
                                    <Input.Password
                                        placeholder="密码"
                                        maxLength={6}
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                    />
                                </Form.Item>



                                <Form.Item label={null}>
                                    <Button htmlType="submit" style={{ width: 240, height: 35, color: "white", backgroundColor: "orange", position: "relative", left: -70 }}

                                        onClick={() => handeldeng()}
                                    >
                                        登录
                                    </Button>
                                    <Button htmlType="submit" style={{ width: 240, height: 35, color: "black", backgroundColor: "white", position: "relative", left: -70, top: 10 }}

                                        onClick={() => navigate('/login')}
                                    >

                                        没有账号？立即注册
                                    </Button>
                                    <span htmlType="submit" style={{ color: "gray", position: "relative", left: 30, top: 20, fontSize: 9 }}
                                    onClick={() => navigate('/wang')}
                                    >
                                        忘记密码
                                    </span>
                                </Form.Item>
                            </Form>

                        </Tabs.TabPane>

                        <Tabs.TabPane key="2" tab="扫码登录">
                            

                            <Flex gap="middle" wrap>
                            <QRCode type="svg" value="https://ant.design/"  style={{width:'240px',height:'24 0px'}}/>
                            </Flex>

                        </Tabs.TabPane>
                    </Tabs>
                </Card>
                {/* </div> */}
            </div>
        </>
    )
}